<template>
  <div style="padding:10px">
     <mainLayout>
      <div>
        <div class="back-view">
          <div class="title vxe-icon-feedback" >商品详情
          </div>
          <div class="back" @click="onClose">
            <vxe-button  size="small" content="返回" icon="vxe-icon-undo"></vxe-button>
          </div>
        </div>
        <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="基本信息" name="first">
          <div style="display: flex;">
            <div style="width:400px;" v-if="formdata.pmsSpuImagesVoList?.length>0">
                <el-carousel  height="400px"  :interval="3000"> 
                      <el-carousel-item v-for="(item,index) in formdata.pmsSpuImagesVoList" :key="index">
                        <template v-if="item.url.indexOf('.mp4')>=0">
                              <video  controls="controls" width="400" height="400">
                                  <source :src="item.url" type="video/mp4" />
                                  <source :src="item.url" type="video/ogg" />
                                  <source :src="item.url" type="video/webm" />
                              </video>
                            </template>
                            <el-image  v-else  :src="item.url" style="height:400px;width:400px" :fit="'cover'" /> 
                      </el-carousel-item>
                </el-carousel>
            </div>
            <div style="width:50%;padding-left:10px;">
                <el-descriptions class="descriptions-list" :column="1"  :border="true">
                <el-descriptions-item   label="商品名称">
                {{formdata.spuName||'--'}}     
                </el-descriptions-item>
                <el-descriptions-item   label="商品品牌">
                  {{formdata.brandName||'--'}}     
                </el-descriptions-item> 
                <el-descriptions-item   label="销售范围">
                  <vxe-button size="mini" style="margin-bottom:5px;" 
                  v-for="item in infoData?.pmsSkuSalesAreaRspList"
                    :content="item.areaName"></vxe-button>
                </el-descriptions-item>
                <el-descriptions-item   label="赠送服务">
                  <template v-if="formdata.spuService">
                   <el-tag style="margin-right:10px;" v-for="item in formdata.spuService?.split(',')">{{item}}</el-tag>
                </template>
                </el-descriptions-item>    
            </el-descriptions>
              <vxe-table
                border
                style="margin-top:5px;"
                :show-overflow="false"
                :column-config="{resizable: true}"
                ref="xTable"
                max-height="230"
                :header-row-style="{backgroundColor:'#f5f7fa'}"
                size="mini"
                :cell-style="({row})=>{
                     return {color:row.skuInfoId==infoData?.skuInfoId?'#409eff':'#333'}
                }"
                :min-height="60"
                :data="formdata.pmsSkuInfoRspList||[]">
                <vxe-column field="skuName" title="规格" :min-width="160">
                  <template #default="{ row }">
                   <span> {{row.skuName||'--'}}</span>
                  </template>
                </vxe-column>
                <vxe-column field="salesAmount.standardString" :min-width="80" title="售价(元)" width="100">
                </vxe-column>
                <vxe-column field="attrValue" title="可售库存" :min-width="80" width="100">
                  <template #default="{ row }">
                    {{row.inventory||'--'}}({{row.unitMeaning||'--'}})
                  </template>
                </vxe-column>
                <vxe-column field="attrValue" title="起批量" :min-width="80" width="100">
                  <template #default="{ row }">
                    <span v-if="row.pmsSkuSalesPriceSettingVoList[0]?.startQuantity"> 
                      {{row.pmsSkuSalesPriceSettingVoList[0]?.startQuantity||'--'}}({{row.unitMeaning}})
                    </span>
                  </template>
                </vxe-column>
                <vxe-column field="showStatus" title="批量优惠价格/元" :min-width="120">
                  <template #default="{ row}">
                    <div v-for="(item,index) in row.pmsSkuSalesPriceSettingVoList">
                      <div v-if="index !=1">
                        ≥ {{item.startQuantity||item.egtQuantity }}({{row.unitMeaning}}):{{ item.execPrice.standardString }}
                      </div>
                      <div v-else>
                        {{item.startQuantity }}~{{ item.endQuantity }}({{row.unitMeaning}}):{{ item.execPrice.standardString }}
                      </div>
                    </div>
                  </template>
                </vxe-column>
              </vxe-table>
            </div>
          </div>

        </el-tab-pane>
        <el-tab-pane label="商品详情" name="second">
            <template v-if="formdata.pmsSpuImagesVoList">
                <div v-for="item in formdata.pmsSpuImagesVoList">
                  <template v-if="item.url.indexOf('.mp4')>=0">
                      <video  controls="controls">
                          <source :src="item.url"  type="video/mp4" />
                          <source :src="item.url"  type="video/ogg" />
                          <source :src="item.url"  type="video/webm" />
                      </video>
                    </template>
                    <el-image v-else  :src="item.url" />
                 </div>
                </template>
        </el-tab-pane>
        <el-tab-pane label="商品参数" name="third">
          <el-descriptions class="descriptions-list" :column="1"  :border="true">
                <template v-for="item in formdata.pmsSpuAttrValueRspList">
                  <el-descriptions-item  :label="item.attrName" > 
                      {{item.attrValue}}     
                  </el-descriptions-item>
                 </template>  
                 <el-descriptions-item  label="温馨提示" > 
                      {{formdata.spuTips}}
                  </el-descriptions-item>
                </el-descriptions>
        </el-tab-pane>
        </el-tabs>
        </div>
    </mainLayout>
</div> 
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue'
import {getSkuInfo} from '@/api/order'
import mainLayout from '@/components/custom/mainLayout.vue'
import imageView from '@/components/custom/image.vue'
import { VXETable } from 'vxe-table'
import { useRouter } from 'vue-router'
const router = useRouter()
const ruleFormRef = ref(null)
const formdata = ref({})
const infoData = ref({})
const xTable = ref(null)
const activeName = ref('first')

onMounted(async () => {
  getInfo()
})

const getInfo =async()=>{
  let res = await getSkuInfo({spuInfoId:router.currentRoute.value.query.spuId})
  if(res.success){
    formdata.value = res.data
    infoData.value=res.data.pmsSkuInfoRspList.find((item)=>item.skuInfoId==router.currentRoute.value.query.Id)
    setTimeout(() => {
      xTable.value.scrollToRow(infoData.value)
    }, 500);
  }
}

const onClose = ()=>{
  router.go(-1)
}



</script>
<style lang="scss" scoped>
.show-box{
    width:400px;
    background-color: #f5f5f5;
    margin: 10px 0;
    border-radius: 2px;
    padding: 10px 0;
}
.back-view{
    display: flex;
    justify-content: space-between;
    padding: 0 10px 15px 0;
    align-items: center;
    border-bottom:1px solid #ddd;
    margin-bottom:20px;
    .title{
      font-size:15px;
      font-weight: bold;
      color:#565656;
      position: relative;  


      text-indent:6px;
    }
    .title::before {
      content: "";
      display: block;
      width: 3px;
      background: #FF9C00;
      height: 16px;
      margin: 0 3px 0 0;
      position: absolute;
      top: 50%;
      margin-top: -9px;
  }
  .back{
    font-size:15px;
    color:#888;
    cursor: pointer;
  }
}
.max-title{
    display: flex;
    justify-content: space-between;
    padding: 10px 0 10px 0;
    align-items: center;
    position: relative;
    font-size: 15px;
    text-indent: 10px;
    font-weight: bold;
    color: #565656;
    margin-top:10px;
    &::before {
      content: "";
      display: block;
      width: 3px;
      background: #FF9C00;
      height: 16px;
      margin: 0 3px 0 0;
      position: absolute;
      top: 50%;
      margin-top: -9px;
  }
}
</style>
